<template>
    <div :class="['header flex-center-between', type ? 'content' : '']">
        <div class="logo"><img src="./../../assets/home/logo.png" alt=""> </div>
        <div class="time">
            <span>{{ date | parseTime }}</span>
            <span class="week">{{ date | parseWeek }}</span>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            date: new Date(),
            timer: null
        }
    },
    mounted() {
        var _this = this
        this.timer = setInterval(() => {
            _this.date = new Date()
        }, 1000)
    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer)
    }
}
</script>
<style lang="scss" scoped>
.header {
    height: 85px;
    line-height: 85px;
    padding: 0 28px;
    box-sizing: border-box;
    color: #585D69; 
    .logo {
        width: 235px;
        height: 58px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }        
    }
    .time {
        font-size: 28px;
        font-family: Arial;
        font-weight: 400;
    }
    .week {
        margin-left: 20px;
    }
}
.content {
    color: #fff;
    background: #388DFF;
}
</style>


